import { createContext, type ReactNode, useContext } from 'react'

export const ThemeContext = createContext<{
  theme: 'light' | 'dark' | 'system'
  tokens: Record<string, string>
}>({
  theme: 'light',
  tokens: {}
})

export const useTheme = () => useContext(ThemeContext)

export type ThemeProviderProps = {
  theme: 'light' | 'dark' | 'system'
  tokens: Record<string, string>
  children: ReactNode
}

export function parseTokens(tokens: Record<string, string>) {
  return Object.entries(tokens).reduce((acc, [key, value]) => {
    acc[`--${key}`] = value
    return acc
  }, {} as Record<string, string>)
}


export function ThemeProvider({ theme, tokens, children }: ThemeProviderProps) {
  const parsedTokens = parseTokens(tokens)
  return (
    <ThemeContext.Provider value={{ theme, tokens }}>
      <div className={`theme-provider ${theme}-theme`} 
        style={{
          width: '100%',
          height: '100%',
          ...parsedTokens
        }}>
        {children}
      </div>
    </ThemeContext.Provider>
  )
}


